<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8"/>
		<title>Meitav Dash Mortage Simulator</title>

		<!-- <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" /> -->

	    <!-- Bootstrap -->
	    <link href="resources/css/bootstrap.rtl.css" rel="stylesheet">

	    <!-- The main CSS file -->
		<link href="resources/css/style.css" rel="stylesheet" />

		<!--[if lt IE 9]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>

	<!-- Notice the controller directive -->
	<body ng-app="app" ng-controller="Ctrl" ng-init="init()">
	<div class="row topBar">
		<img src="resources/img/MeitavDashLogo.png" alt="">
	</div>
	<div class="row basicInfoRow">
		<div class="col-sm-3">
			<div class="right basicInfoLabel">מידע כללי</div>
		</div>
		<div class="col-sm-3"></div>
		<div class="col-sm-3">
			<div class="input-group">
				<span class="input-group-addon addon-green">שם מלא:</span>
	  			<input ng-model="customerName" class="form-control">
			</div>
		</div>
		<div class="col-sm-3">
			<div class="input-group">
				<span class="input-group-addon addon-green">מס. טלפון:</span>
	  			<input ng-model="phoneNumber" class="form-control">
			</div>
		</div>
	</div>
	<div class="jumbotron">
		<!-- <center>
			<h1 class="center">מידע כללי</h1>
		</center> -->
		<form class="form-vertical" role="form">
			<div class="form-group">
				<label for="loanSum" class="col-sm-1 control-label">סכום ההלוואה</label>
				<div class="col-sm-3">
					<div class="input-group">
						<span class="input-group-addon">₪</span>
			  			<input ng-model="totalLoan" ng-change="compareProposals()" format="number" class="form-control" id="loanSum" placeholder="סכום ההלוואה">
	  				</div>
				</div>
			</div>
			<div class="form-group">
				<label for="primeInterest" class="col-sm-1 control-label">ריבית הפריים</label>
				<div class="col-sm-3">
					<!-- <div class="input-group"> -->
					<div class="input-group">
						<span class="input-group-addon" ng-click="showPrimeSpeculations = !showPrimeSpeculations">%</span>
						<select class="form-control" ng-model="selectedPrimeForecastMethod" ng-change="primeInterestForecastMethodChanged()">
							<option ng-repeat="method in primeInterestForecastSelect" value="{{method.value}}">{{method.name}}</option>
							<!-- <option>צפי נמוך</option>
							<option>צפי סביר</option>
							<option>צפי גבוה</option>
							<option>הזנה ידנית</option>
							<option>עריכה...</option> -->
						</select>
						<!-- <span class="input-group-addon" ng-click="showPrimeSpeculations = !showPrimeSpeculations">%</span>
			  			<input ng-model="primeInterestVal" ng-change="compareProposals()" type="number" step="0.1" class="form-control" id="primeInterest" placeholder="ריבית הפריים"> -->
		  			</div>
				</div>
			</div>		
			<div class="form-group">
				<label for="expectedInflation" class="col-sm-1 control-label">אינפלציה</label>
				<div class="col-sm-3">
					<div class="input-group">
						<span class="input-group-addon">%</span>
			  			<input ng-model="expectedInflationVal" ng-change="compareProposals()" type="number" step="0.1" class="form-control" id="expectedInflation" placeholder="אינפלציה">
		  			</div>
				</div>
			</div>
		</form>
	</div>
	<div ng-show="!showPrimeSpeculations">
		<div class="row">
			<div class="col-lg-5 curProposalTable">
				<div class="panel panel-default">
					<!-- Default panel contents -->
					<div class="panel-heading">&nbsp משכנתא קיימת
						<span ng-click="showCur = !showCur" class="glyphicon pull-left" ng-class="{ 'glyphicon-minus': showCur, 'glyphicon-plus': !showCur}"></span>
						<img ng-click="addRowCurrentProposal()" src="resources/img/glyphicons_190_circle_plus.png" class="pull-right addRowBtn"/>
					</div>
					<!-- <div class="panel-body">
						<p>...</p>
					</div> -->
				</div>
				<table class="table" ng-model="currentProposalTable" id="currentProposalTable" ng-show="showCur">
			      	<thead>
			        	<tr>
			          		<th>מסלול</th>
				          	<th>סכום</th>
				          	<th>שיטת החזר</th>
				          	<th>תקופת גרייס</th>
				          	<th>תקופה</th>
				          	<th>ריבית</th>
				          	<th>החזר חודשי</th>
				          	<th>סה"כ לתשלום</th>
				          	<th>חלק יחסי</th>
				          	<th></th>
			        	</tr>
			      	</thead>
			      	<tbody>
			      		<tr ng-repeat="proposedTrack in proposedTracks" ng-class="{ 'danger': proposedTrack.color}">
			          		<td class="tracksSelect">
			          			<select class="form-control" ng-model="proposedTrack.track" ng-change="compareProposals()">
			          				<option></option>
			          				<option ng-repeat="track in tracks" value="{{track.index}}">{{track.name}}</option>
			          			</select>
		          			</td>
		          			<td class="longInput">
		          				<input class="form-control" format="number" ng-model="proposedTrack.sum" ng-change="compareProposals()">
		          			</td>
		          			<td class="paymentMethodSelect">
			          			<select class="form-control" ng-model="proposedTrack.payMethod" ng-change="compareProposals()">
			          				<option value="1">קרן שווה</option>
			          				<option value="2">שפיצר</option>
			          				<option value="3">גרייס חלקי</option>
			          				<option value="4">גרייס מלא</option>
			          				<option value="5">בלון חלקי</option>
			          				<option value="6">בלון מלא</option>
			          			</select>
		          			</td>
		          			<td class="shortInput">
		          				<input class="form-control" type="number" ng-model="proposedTrack.graceLen" ng-change="compareProposals()">
		          			</td>
		          			<td class="shortInput">
		          				<input class="form-control" type="number" ng-model="proposedTrack.period" ng-change="compareProposals()">
		          			</td>
		          			<td class="shortInput">
		          				<input class="form-control" type="number" step="0.1" ng-model="proposedTrack.interest" ng-change="compareProposals()">
		          			</td>
		          			<td>
		          				<div ng-model="proposedTrack.monthly">{{proposedTrack.monthly | number}}</div>
	          				</td>
			          		<td>
			          			<div ng-model="proposedTrack.total">{{proposedTrack.total | number}}</div>
		          			</td>
		          			<td>
			          			<div ng-model="proposedTrack.total">{{ (!proposedTrack.sum && 0.01 || proposedTrack.sum / totalLoan*100) | number:1}}%</div>
		          			</td>
		          			<td class="delBtnCol">
		          				<img class="delRowBtn" src="resources/img/glyphicons_192_circle_remove.png" ng-click="deleteRowCur($index)"/>
	          				</td>
			        	</tr>
			      	</tbody>
			    </table>
			</div>

			<div class="col-lg-5 ourProposalTable">
				<div class="panel panel-default">
					<!-- Default panel contents -->
					<div class="panel-heading">&nbsp משכנתא חדשה 
						<span ng-click="showOur = !showOur" class="glyphicon pull-left" ng-class="{ 'glyphicon-minus': showOur, 'glyphicon-plus': !showOur}"></span>
						<img ng-click="addRowOurProposal()" src="resources/img/glyphicons_190_circle_plus.png" class="pull-right addRowBtn"/>
					</div>
				</div>
				<table id="compareProposalsTable" class="table" ng-show="showOur">
			      	<thead>
			        	<tr>
			          		<th>מסלול</th>
				          	<th>סכום</th>
				          	<th>שיטת החזר</th>
				          	<th>תקופת גרייס</th>
				          	<th>תקופה</th>
				          	<th>ריבית</th>
				          	<th>החזר חודשי</th>
				          	<th>סה"כ לתשלום</th>
				          	<th>חלק יחסי</th>
				          	<th></th>
			        	</tr>
			      	</thead>
			      	<tbody>
			        	<tr ng-repeat="ourTrack in ourTracks" ng-class="{ 'danger': ourTrack.color}">
			          		<td class="tracksSelect">
			          			<select class="form-control" ng-model="ourTrack.track" ng-change="compareProposals()">
			          				<option></option>
			          				<option ng-repeat="track in tracks" value="{{track.index}}">{{track.name}}</option>
			          			</select>
		          			</td>
		          			<td class="longInput">
		          				<input class="form-control" format="number" ng-model="ourTrack.sum" ng-change="compareProposals()">
		          			</td>
		          			<td class="paymentMethodSelect">
			          			<select class="form-control" ng-model="ourTrack.payMethod" ng-change="compareProposals()">
			          				<option value="1">קרן שווה</option>
			          				<option value="2">שפיצר</option>
			          				<option value="3">גרייס חלקי</option>
			          				<option value="4">גרייס מלא</option>
			          				<option value="5">בלון חלקי</option>
			          				<option value="6">בלון מלא</option>
			          			</select>
		          			</td>
		          			<td class="shortInput">
		          				<input class="form-control" type="number" ng-model="ourTrack.graceLen" ng-change="compareProposals()">
		          			</td>
		          			<td class="shortInput">
		          				<input class="form-control" type="number" ng-model="ourTrack.period" ng-change="compareProposals()">
		          			</td>
		          			<!-- <td class="graceTypeSelect">
			          			<select class="form-control" ng-model="ourTrack.graceType">
			          				<option value="0">ללא</option>
			          				<option value="1">חלקי</option>
			          				<option value="2">מלא</option>
			          			</select>
		          			</td> -->
		          			<td class="shortInput">
		          				<input class="form-control" type="number" step="0.1" ng-model="ourTrack.interest" ng-change="compareProposals()">
		          			</td>
		          			<td>
		          				<div ng-model="ourTrack.monthly">{{ourTrack.monthly | number}}</div>
	          				</td>
			          		<td>
			          			<div ng-model="ourTrack.total">{{ourTrack.total | number}}</div>
		          			</td>
		          			<td>
			          			<div ng-model="ourTrack.total">{{ (!ourTrack.sum && 0.01 || ourTrack.sum / totalLoan*100) | number:1}}%</div>
		          			</td>
		          			<td class="delBtnCol">
		          				<img class="delRowBtn" src="resources/img/glyphicons_192_circle_remove.png" ng-click="deleteRowOur($index)"/>
	          				</td>
			        	</tr>
			      	</tbody>
			    </table>
			</div>
		</div>

		<!-- <div class="row">
			<div class="col-lg-1"></div>
			<div class="col-lg-1">
				<button class="btn btn-primary" ng-click="compareProposals()">חשב</button>
			</div>
		</div>	 -->

		<div class="row" ng-show="showCompare">
			<!-- <div class="col-lg-3">
			</div> -->
			<div class="col-lg-6 curProposalTable">
				<div class="panel panel-default">
					<!-- Default panel contents -->
					<div class="panel-heading">&nbsp סיכום <span class="glyphicon glyphicon-minus pull-left"></span></div>
					<!-- <div class="panel-body">
						<p>...</p>
					</div> -->
				</div>
				<table class="table">
			      	<thead>
			        	<tr>
			        		<th></th>
			          		<th>תמהיל א'</th>
			          		<th>תמהיל ב'</th>
			          		<th>הפרש</th>
			          	</tr>
		          	</thead>
		          	<tbody>
		          		<tr ng-class="{'success' : compared.cur.payments[0] > compared.our.payments[0] , 'warning' : compared.cur.payments[0] < compared.our.payments[0]}">
			          		<td>החזר חודשי ראשון</td>
			          		<td>
			          			<div>{{compared.cur.payments[0] | number:0}}</div>
		          			</td>
		          			<td>
			          			<div>{{compared.our.payments[0] | number:0}}</div>
		          			</td>
		          			<td>
			          			<div class="rtlCorrection">{{compared.cur.payments[0] - compared.our.payments[0] | number:0}}</div>
		          			</td>
	          			</tr>
	          			<tr ng-class="{'success' : compared.cur.total > compared.our.total , 'warning' : compared.cur.total < compared.our.total}">
			          		<td>סה"כ לתשלום</td>
			          		<td>
			          			<div>{{compared.cur.total | number}}</div>
		          			</td>
		          			<td>
			          			<div>{{compared.our.total | number}}</div>
		          			</td>
		          			<td>
			          			<div class="rtlCorrection">{{compared.cur.total - compared.our.total | number:0}}</div>
		          			</td>
	          			</tr>
	          			<tr ng-class="{'success' : compared.cur.avg > compared.our.avg , 'warning' : compared.cur.avg < compared.our.avg}">
			          		<td>החזר חודשי ממוצע</td>
			          		<td>
			          			<div>{{compared.cur.avg | number}}</div>
		          			</td>
		          			<td>
			          			<div>{{compared.our.avg | number}}</div>
		          			</td>
		          			<td>
			          			<div class="rtlCorrection">{{compared.cur.avg - compared.our.avg | number:0}}</div>
		          			</td>
	          			</tr>
	          			<tr ng-class="{'success' : compared.cur.ppi > compared.our.ppi, 'warning' : compared.cur.ppi < compared.our.ppi }">
			          		<td>תשלום על כל שקל</td>
			          		<td>
			          			<div>{{compared.cur.ppi | number}}</div>
		          			</td>
		          			<td>
			          			<div>{{compared.our.ppi | number}}</div>
		          			</td>
		          			<td>
			          			<div class="rtlCorrection">{{compared.cur.ppi - compared.our.ppi | number:2}}</div>
		          			</td>
	          			</tr>
	          			<tr ng-class="{'success' : compared.cur.wint > compared.our.wint , 'warning' : compared.cur.wint < compared.our.wint}">
			          		<td>ריבית משוקללת</td>
			          		<td>
			          			<div>{{compared.cur.wint}}</div>
		          			</td>
		          			<td>
			          			<div>{{compared.our.wint}}</div>
		          			</td>
		          			<td>
			          			<div class="rtlCorrection">{{compared.cur.wint - compared.our.wint}}</div>
		          			</td>
	          			</tr>
		          	</tbody>
	          	</table>	
			</div>
			<!-- <div class="col-lg-3">
			</div> -->
			<div class="col-lg-6 ourProposalTable">
				<div class="panel panel-default">
					<!-- Default panel contents -->
					<div class="panel-heading">&nbsp גרפים <span class="glyphicon glyphicon-minus pull-left"></span></div>
					<div class="row">
						<div class="col-lg-4">
							<div id="totalChartDiv"></div>
						</div>
						<div class="col-lg-4">
							<div id="monthsChartDiv"></div>
						</div>
						<div class="col-lg-4">
							<div id="monthsKerenChartDiv"></div>
						</div>
					</div>
					<!-- <div class="panel-body">
						<p>...</p>
					</div> -->
				</div>
			</div>
		</div>

		<div class="row" ng-show="showCompare">
			<div class="col-lg-3">
			</div>
			<div class="col-lg-6">
				<div class="panel panel-default">
					<!-- Default panel contents -->
					<div class="panel-heading">&nbsp החזר לפי חודש 
						<span class="glyphicon glyphicon-minus pull-left"></span>
						<input type="number" step="1" ng-model="compareSpecMonth" ng-change="calcMidSum(compareSpecMonth)" placeholder="מספר החודש">
					</div>
					<!-- <div class="panel-body">
						<p>...</p>
					</div> -->
				</div>
				<!-- <table id="midSumCompareTable" class="table table-striped" ng-show="compareSpecMonth > 0"> -->
				<table id="midSumCompareTable" class="table table-striped">
			      	<thead>
			        	<tr>
			        		<th></th>
			          		<th>תמהיל א'</th>
			          		<th>תמהיל ב'</th>
			          		<th>הפרש</th>
			          	</tr>
		          	</thead>
		          	<tbody>
		          		<tr>
			          		<td>החזר בחודש מסויים</td>
			          		<td>
			          			<div>{{compared.cur.payments[compareSpecMonth] | number}}</div>
		          			</td>
		          			<td>
			          			<div>{{compared.our.payments[compareSpecMonth] | number}}</div>
		          			</td>
		          			<td>
			          			<div class="rtlCorrection">{{compared.cur.payments[compareSpecMonth] - compared.our.payments[compareSpecMonth] | number:0}}</div>
		          			</td>
	          			</tr>
	          			<tr>
			          		<td>יתרה בחודש מסויים</td>
			          		<td>
			          			<div>{{compared.cur.total - curMidSum | number}}</div>
		          			</td>
		          			<td>
			          			<div>{{compared.our.total - ourMidSum | number}}</div>
		          			</td>
		          			<td>
			          			<div class="rtlCorrection">{{ (compared.cur.total - curMidSum) - (compared.our.total - ourMidSum) | number:0}}</div>
		          			</td>
	          			</tr>
	          			<tr>
			          		<td>סה"כ שולם</td>
			          		<td>
			          			<div>{{curMidSum | number}}</div>
		          			</td>
		          			<td>
			          			<div>{{ourMidSum | number}}</div>
		          			</td>
		          			<td>
			          			<div class="rtlCorrection">{{curMidSum - ourMidSum | number:0}}</div>
		          			</td>
	          			</tr>
		          	</tbody>
	          	</table>	
			</div>
			<div class="col-lg-3">
			</div>
		</div>
	</div>
	<div ng-show="showPrimeSpeculations">
		<div class="row">
			<div class="col-lg-3 form-group">
				<label class="col-sm-4 control-label">ריבית הפריים</label> 
				<div class="col-sm-8">
					<input class="form-control" type="number" step="0.25" ng-model="startPrime" ng-change="updateCalcArr('prime')"/>
				</div>
			</div>
		</div>
		<div class="row">
			<h2 class="col-lg-3 text-center">צפי נמוך</h3>
			<h2 class="col-lg-3 text-center">צפי סביר</h3>
			<h2 class="col-lg-3 text-center">צפי גבוה</h3>
			<h2 class="col-lg-3 text-center">הזנה ידנית</h3>
		</div>
		<div class="row">
			<h3 class="col-sm-1">חודש</h3>
			<h3 class="col-sm-1">שינוי</h3>
			<h3 class="col-sm-1">פריים</h3>
			<h3 class="col-sm-1">חודש</h3>
			<h3 class="col-sm-1">שינוי</h3>
			<h3 class="col-sm-1">פריים</h3>
			<h3 class="col-sm-1">חודש</h3>
			<h3 class="col-sm-1">שינוי</h3>
			<h3 class="col-sm-1">פריים</h3>
			<h3 class="col-sm-1">חודש</h3>
			<h3 class="col-sm-1">שינוי</h3>
			<h3 class="col-sm-1">פריים</h3>
		</div>
		<div class="row" ng-repeat="change in PrimeInterestForecast.low track by $index">
			<div class="col-lg-3 form-group">
				<label class="col-lg-4 control-label">{{addMonthToDate($index)}}</label> 
				<div class="col-lg-4">
					<input class="form-control" type="number" step="0.25" ng-model="PrimeInterestForecast.low[$index]" ng-change="updateCalcArr('low')"/>
				</div>
				<div class="col-lg-4">{{PrimeInterestForecast.lowCalc[$index]}}%</div>
			</div>
			<div class="col-lg-3 form-group">
				<label class="col-lg-4 control-label">{{addMonthToDate($index)}}</label> 
				<div class="col-lg-4">
					<input class="form-control" type="number" step="0.25" ng-model="PrimeInterestForecast.mid[$index]" ng-change="updateCalcArr('mid')"/>
				</div>
				<div class="col-lg-4">{{PrimeInterestForecast.midCalc[$index]}}%</div>
			</div>
			<div class="col-lg-3 form-group">
				<label class="col-lg-4 control-label">{{addMonthToDate($index)}}</label> 
				<div class="col-lg-4">
					<input class="form-control" type="number" step="0.25" ng-model="PrimeInterestForecast.high[$index]" ng-change="updateCalcArr('high')"/>
				</div>
				<div class="col-lg-4">{{PrimeInterestForecast.highCalc[$index]}}%</div>
			</div>
			<div class="col-lg-3 form-group">
				<label class="col-lg-4 control-label">{{addMonthToDate($index)}}</label> 
				<div class="col-lg-4">
					<input class="form-control" type="number" step="0.25" ng-model="PrimeInterestForecast.custom[$index]" ng-change="updateCalcArr('custom')"/>
				</div>
				<div class="col-lg-4">{{PrimeInterestForecast.customCalc[$index]}}%</div>
			</div>
		</div>
	</div>
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="resources/js/jquery.min.js"></script>
    <script src="resources/js/bootstrap.min.js"></script>
	<script src="resources/js/angular.min.js"></script>
	<script src="resources/js/angular-cookies.min.js"></script>
	<script src="resources/js/script.js"></script>
	<script src="resources/js/excel.js"></script>
	<!--<script src="resources/js/ng-google-chart.js"></script>-->
	<script src="https://www.google.com/jsapi"></script>
	<script>
		google.load("visualization", "1", {packages:["corechart"]});
  		//google.setOnLoadCallback(drawChart);
  		function drawCharts(cPayments, oPayments, cTotal, oTotal, cPpi, oPpi, kcPayments, koPayments){
  			drawMonthlyChart(cPayments, oPayments);
  			drawMonthlyKerenChart(kcPayments, koPayments);
  			drawTotalChart(cTotal, oTotal);
  			//drawPpiChart(cPpi, oPpi);

  			function drawMonthlyChart(cPayments, oPayments) {
		  		if(!cPayments || !oPayments){
		  			return;
		  		}
		  		var input = [ ['חודש', 'משכנתא חדשה', 'משכנתא קיימת'] ];
		  		var len = cPayments.length > oPayments.length ? cPayments.length : oPayments.length
		  		for(var i = 0 ; i < len; i++){
		  			input.push([ i+1, oPayments[i] ? oPayments[i] : 0 ,cPayments[i] ? cPayments[i] : 0 ]);
		  		}
		    	var data = google.visualization.arrayToDataTable(input);

			    var options = {
			      title: "תשלום חודשי",
			    };

		    	var chart = new google.visualization.LineChart(document.getElementById('monthsChartDiv'));
		    	chart.draw(data, options);
  			};

  			function drawMonthlyKerenChart(kcPayments, koPayments) {
		  		if(!kcPayments || !koPayments){
		  			return;
		  		}
		  		var input = [ ['חודש', 'משכנתא חדשה', 'משכנתא קיימת'] ];
		  		var len = kcPayments.length > koPayments.length ? kcPayments.length : koPayments.length
		  		for(var i = 0 ; i < len; i++){
		  			input.push([ i+1, koPayments[i] ? koPayments[i] : 0 ,kcPayments[i] ? kcPayments[i] : 0 ]);
		  		}
		    	var data = google.visualization.arrayToDataTable(input);

			    var options = {
			      title: "יתרת קרן",
			    };

		    	var chart = new google.visualization.LineChart(document.getElementById('monthsKerenChartDiv'));
		    	chart.draw(data, options);
  			};

	  		function drawTotalChart(cTotal, oTotal){
	  			if(cTotal == undefined || oTotal == undefined){
	  				return;
	  			}

	  			var data = google.visualization.arrayToDataTable([
		          ['סה"כ', 'משכנתא חדשה', 'משכנתא קיימת'],
		          [''	  , oTotal		 , cTotal		],
		        ]);

		        var options = {
		          title: 'השוואת החזר כולל',
		          hAxis: {title: '', titleTextStyle: {color: 'red'}}
		        };

		        var chart = new google.visualization.ColumnChart(document.getElementById('totalChartDiv'));
		        chart.draw(data, options);
	  		}

	  		function drawPpiChart(cPpi, oPpi){
	  			if(cPpi == undefined || oPpi == undefined){
	  				return;
	  			}
	  			cPpi = parseFloat(cPpi);
	  			oPpi = parseFloat(oPpi);
	  			var data = google.visualization.arrayToDataTable([
		          ['סה"כ', 'משכנתא חדשה', 'משכנתא קיימת'],
		          [''	  , oPpi		 , cPpi		],
		        ]);

		        var options = {
		          title: 'החזר על כל שקל',
		          hAxis: {title: '', titleTextStyle: {color: 'red'}}
		        };

		        var chart = new google.visualization.ColumnChart(document.getElementById('ppiChartChart'));
		        chart.draw(data, options);
	  		}
		}
	  	
	</script>
	<!-- // TO BE DELETED!! -->
	<!--<script src="resources/js/debug.js"></script>-->
	<!-- // TO BE DELETED!! -->

	</body>
</html>
